<!--
 * @Description: 用户中心页面
 * @Author: augn
 * @Date: 2022-10-20 23:24:55
 * @LastEditTime: 2022-11-02 10:44:27
 * @LastEditors: Gaq
-->
<script setup>
import request from "@/utils/request";
import router from "@/router";
import { ElMessage } from "element-plus";
import bus from "@/utils";

let user = ref({});
let goods = ref({});
let post = ref({});

let userInfo = ref({});
let userItem = ref([]);
let goodsItem = ref([]);
let postItem = ref([]);
let total = ref(0);
let currentPage = ref(1);

const userDrawer = ref(false);
const goodsDrawer = ref(false);

const upUser = ref(0);
const upGoods = ref(0);

const isEmpty = ref(false);
const isLoading = ref(false);
const choose = ref(3);
let noClick = ref(true);

const change = (res) => {
  choose.value = res;
  currentPage.value = 1;
  if (res === 1) {
    getNewUserInfo();
  }
  if (res === 2) {
    getUserList();
    if (userItem.value.length != 0) {
      isEmpty.value = true;
    } else {
      isEmpty.value = false;
    }
  }
  if (res === 3) {
    getGoodsList();
    if (goodsItem.value.length != 0) {
      isEmpty.value = true;
    } else {
      isEmpty.value = false;
    }
  }
  if (res === 4) {
    getPostList();
    if (postItem.value.length != 0) {
      isEmpty.value = true;
    } else {
      isEmpty.value = false;
    }
  }
};

onBeforeMount(() => {
  bus.emit("ifShow", false);
  getGoodsList();
  getUserInfo();
});

const loginOut = () => {
  localStorage.clear();
  router.push({
    path: "/",
  });
};

const getUserInfo = () => {
  userInfo.value = JSON.parse(localStorage.getItem("user"));
};

// 获取列表方法
const getUserList = (res) => {
  isLoading.value = true;
  if (res === 1) {
    currentPage.value = 1;
  } else if (res === 2) {
    currentPage.value = 1;
    user.value = {};
  }
  request
    .post(`/user/getPart?pageSize=15&pageNum=${currentPage.value}`, user.value)
    .then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
        isEmpty.value = true;
      } else {
        userItem.value = res.data.userList;
        total.value = res.data.total;
        isEmpty.value = false;
        isLoading.value = false;
      }
    });
};

const getGoodsList = (res) => {
  isLoading.value = true;
  if (res === 1) {
    currentPage.value = 1;
  } else if (res === 2) {
    currentPage.value = 1;
    goods.value = {};
  }
  request
    .post(
      `/goods/getPart?pageSize=15&pageNum=${currentPage.value}`,
      goods.value
    )
    .then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
        isEmpty.value = true;
      } else {
        goodsItem.value = res.data.goodsList;
        total.value = res.data.total;
        isEmpty.value = false;
        isLoading.value = false;
      }
    });
};

const getPostList = (res) => {
  isLoading.value = true;
  if (res === 1) {
    currentPage.value = 1;
  } else if (res === 2) {
    currentPage.value = 1;
    post.value = {};
  }
  request
    .post(`/post/getPart?pageSize=15&pageNum=${currentPage.value}`, post.value)
    .then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
        isEmpty.value = true;
      } else {
        postItem.value = res.data.postList;
        total.value = res.data.total;
        isEmpty.value = false;
        isLoading.value = false;
      }
    });
};

// 删除方法
const deleteUser = (index, id) => {
  request.delete(`/user/deleteOne/` + id).then((res) => {
    if (res.code == -1) {
      console.log(res.msg);
    } else {
      userItem.value.splice(index, 1);
    }
  });
};

const deleteGoods = (index, id) => {
  request.delete(`/goods/deleteOne/` + id).then((res) => {
    if (res.code == -1) {
      console.log(res.msg);
    } else {
      goodsItem.value.splice(index, 1);
    }
  });
};

const deletePost = (index, id) => {
  request.delete(`/post/deleteOne/` + id).then((res) => {
    if (res.code == -1) {
      console.log(res.msg);
    } else {
      postItem.value.splice(index, 1);
    }
  });
};

// 更新方法
const updateUser = (res) => {
  upUser.value = res;
  userDrawer.value = true;
};

const updateGoods = (res) => {
  upGoods.value = res;
  goodsDrawer.value = true;
};

const updatePost = (postId) => {
  const routeUrl = router.resolve({
    name: "postEditor",
    query: { postId },
  });
  window.open(routeUrl.href, "_blank");
};

const userInfoSubmit = (res) => {
  request.put(`/user/updateOne`, res).then((res) => {
    if (res.code == -1) {
      ElMessage.warning(res.msg);
    } else {
      ElMessage.success("更新用户信息成功");
    }
  });
};

const goodsSubmit = (res) => {
  request.put(`/goods/updateOne`, res).then((res) => {
    if (res.code == -1) {
      ElMessage.warning(res.msg);
    } else {
      ElMessage.success("更新商品信息成功");
    }
  });
};

// 获取最新用户信息
const getNewUserInfo = () => {
  request.get(`/user/getOne/` + userInfo.value.userId).then((res) => {
    if (res.code == -1) {
      console.log(res.msg);
    } else {
      userInfo.value = res.data;
      localStorage.setItem("user", JSON.stringify(res.data));
    }
  });
};
</script>

<template>
  <div class="productBox">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside class="aside">
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 30vh;
          "
        >
          <img
            :src="userInfo.image"
            style="width: 100px; border-radius: 25px"
          />
          <div style="margin-top: 10px; font-size: 30px">
            {{ userInfo.name }}-管理员
          </div>
          <div class="loginOut" @click="loginOut">退出登录</div>
        </div>

        <div>
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div
              class="choose"
              :style="{ color: choose === 1 ? 'white' : '' }"
              @click="change(1)"
            >
              个人设置
            </div>
            <div
              class="choose"
              :style="{ color: choose === 2 ? 'white' : '' }"
              @click="change(2)"
            >
              用户管理
            </div>
            <div
              class="choose"
              :style="{ color: choose === 3 ? 'white' : '' }"
              @click="change(3)"
            >
              商品管理
            </div>
            <div
              class="choose"
              :style="{ color: choose === 4 ? 'white' : '' }"
              @click="change(4)"
            >
              帖子管理
            </div>
          </div>
        </div>
      </el-aside>

      <!-- 主页面 -->
      <el-main class="main" style="position: relative">
        <!-- 个人设置 -->
        <div v-if="choose == 1">
          <el-form :model="userInfo" label-width="120px" style="margin: 50px">
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" />
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="userInfo.role" />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userInfo.sex" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.telephoneNum" />
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="userInfo.account" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userInfo.password" />
            </el-form-item>
            <el-form-item style="display: flex; justify-content: space-between">
              <el-button type="primary" @click="userInfoSubmit(userInfo)"
                >提交</el-button
              >
              <el-button style="margin-left: 100px">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 用户管理 -->
        <div v-if="choose == 2">
          <!-- 查询条件 -->
          <div class="conForm">
            <el-form :model="user">
              <el-form-item label="角色">
                <el-input v-model="user.role" style="width: 50px" />
              </el-form-item>
              <el-form-item label="角色编号">
                <el-input v-model="user.roleId" style="width: 50px" />
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="user.name" style="width: 80px" />
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="user.telephoneNum" style="width: 120px" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getUserList(1)"
                  >查询</el-button
                >
                <el-button type="primary" @click="getUserList(2)"
                  >清空</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <div v-show="!isEmpty">
            <span v-show="isLoading" style="font-size: large"
              >加载中......</span
            >
            <!-- 表格 -->
            <el-table :data="userItem" height="100%" style="width: 100%">
              <el-table-column prop="userId" label="编号" width="80" />
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="sex" label="性别" />
              <el-table-column prop="account" label="账号" />
              <el-table-column prop="password" label="密码" />
              <el-table-column prop="telephoneNum" label="电话号码" />
              <el-table-column label="是否为管理者">
                <template #default="user">
                  {{ user.row.manager === 1 ? "是" : "否" }}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="user">
                  <el-popconfirm
                    title="确定要删除吗?"
                    @confirm="deleteUser(user.$index, user.row.userId)"
                  >
                    <template #reference>
                      <el-button link type="primary" size="small"
                        >删除</el-button
                      >
                    </template>
                  </el-popconfirm>
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="updateUser(user.$index)"
                    >编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagination">
              <el-pagination
                v-model:current-page="currentPage"
                :page-size="15"
                layout="prev, pager, next"
                v-model:total="total"
                @current-change="getUserList(3)"
              />
            </div>
          </div>
          <div class="empty" v-show="isEmpty">
            <el-empty description="暂时没有您想要的用户~~" />
          </div>
        </div>

        <!-- 商品管理 -->
        <div v-if="choose == 3">
          <!-- 查询条件 -->
          <div class="conForm">
            <el-form :model="goods">
              <el-form-item label="文化遗产编号">
                <el-input v-model="goods.culId" style="width: 50px" />
              </el-form-item>
              <el-form-item label="制造商编号">
                <el-input v-model="goods.manuId" style="width: 50px" />
              </el-form-item>
              <el-form-item label="关键字">
                <el-input v-model="goods.keyword" style="width: 80px" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getGoodsList(1)"
                  >查询</el-button
                >
                <el-button type="primary" @click="getGoodsList(2)"
                  >清空</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <div v-show="!isEmpty">
            <span v-show="isLoading" style="font-size: large"
              >加载中......</span
            >
            <!-- 表格 -->
            <el-table :data="goodsItem" height="100%" style="width: 100%">
              <el-table-column prop="goodsId" label="编号" width="80" />
              <el-table-column prop="culId" label="文化遗产" width="80" />
              <el-table-column prop="manuId" label="制造商" width="80" />
              <el-table-column
                prop="introduction"
                label="简介"
                show-overflow-tooltip="true"
                min-width="100"
              />
              <el-table-column prop="sort" label="分类" />
              <el-table-column prop="keyword" label="关键词" />
              <el-table-column prop="evaluate" label="评分" width="60" />
              <el-table-column prop="coverPrice" label="封面价格" width="80" />
              <el-table-column prop="authorize" label="上架" width="60" />
              <el-table-column label="操作">
                <template #default="goods">
                  <el-popconfirm
                    title="确定要删除吗?"
                    @confirm="deleteGoods(goods.$index, goods.row.goodsId)"
                  >
                    <template #reference>
                      <el-button link type="primary" size="small"
                        >删除</el-button
                      >
                    </template>
                  </el-popconfirm>
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="updateGoods(goods.$index)"
                    >编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagination">
              <el-pagination
                v-model:current-page="currentPage"
                :page-size="15"
                layout="prev, pager, next"
                v-model:total="total"
                @current-change="getGoodsList(3)"
              />
            </div>
          </div>
          <div class="empty" v-show="isEmpty">
            <el-empty description="暂时没有您想要的商品~~" />
          </div>
        </div>

        <!-- 帖子管理 -->
        <div v-if="choose == 4">
          <!-- 查询条件 -->
          <div class="conForm">
            <el-form :model="post">
              <el-form-item label="用户编号">
                <el-input v-model="post.userId" style="width: 50px" />
              </el-form-item>
              <el-form-item label="关键字">
                <el-input v-model="post.detail" style="width: 80px" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getPostList(1)"
                  >查询</el-button
                >
                <el-button type="primary" @click="getPostList(1)"
                  >清空</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <div v-show="!isEmpty">
            <span v-show="isLoading" style="font-size: large"
              >加载中......</span
            >
            <!-- 表格 -->
            <el-table :data="postItem" height="100%" style="width: 100%">
              <el-table-column prop="postId" label="编号" width="80" />
              <el-table-column prop="role" label="角色" />
              <el-table-column prop="userId" label="作者编号" />
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="sort" label="评分" />
              <el-table-column prop="views" label="浏览量" />
              <el-table-column prop="likeCount" label="点赞数" />
              <el-table-column label="操作">
                <template #default="post">
                  <el-popconfirm
                    title="确定要删除吗?"
                    @confirm="deletePost(post.$index, post.row.postId)"
                  >
                    <template #reference>
                      <el-button link type="primary" size="small"
                        >删除</el-button
                      >
                    </template>
                  </el-popconfirm>
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="updatePost(post.row.postId)"
                    >编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagination">
              <el-pagination
                v-model:current-page="currentPage"
                :page-size="15"
                layout="prev, pager, next"
                v-model:total="total"
                @current-change="getPostList(3)"
              />
            </div>
          </div>
          <div class="empty" v-show="isEmpty">
            <el-empty description="暂时没有您想要的帖子~~" />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>

  <!-- 更新用户信息 -->
  <el-drawer v-model="userDrawer" title="updateUser" :with-header="false">
    <el-form :model="userItem[upUser]" label-width="120px" style="margin: 50px">
      <el-form-item label="姓名">
        <el-input v-model="userItem[upUser].name" />
      </el-form-item>
      <el-form-item label="角色">
        <el-input v-model="userItem[upUser].role" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="userItem[upUser].sex" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="userItem[upUser].telephoneNum" />
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="userItem[upUser].account" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="userItem[upUser].password" />
      </el-form-item>
      <el-form-item label="管理者">
        <el-input v-model="userItem[upUser].manager" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="userInfoSubmit(userItem[upUser])"
          >提交</el-button
        >
        <el-button @click="userDrawer = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

  <!-- 更新商品信息 -->
  <el-drawer v-model="goodsDrawer" title="updateGoods" :with-header="false">
    <el-form
      :model="goodsItem[upGoods]"
      label-width="120px"
      style="margin: 50px"
    >
      <el-form-item label="商品简介">
        <el-input v-model="goodsItem[upGoods].introduction" />
      </el-form-item>
      <el-form-item label="分类">
        <el-input v-model="goodsItem[upGoods].sort" />
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="goodsItem[upGoods].keyword" />
      </el-form-item>
      <el-form-item label="封面价格">
        <el-input v-model="goodsItem[upGoods].coverPrice" />
      </el-form-item>
      <el-form-item label="授权上架">
        <el-input v-model="goodsItem[upGoods].authorize" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goodsSubmit(goodsItem[upGoods])"
          >提交</el-button
        >
        <el-button @click="goodsDrawer = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="less" scoped>
.choose {
  margin-top: 20px;
}

.choose:hover {
  cursor: pointer;
  color: aliceblue;
}

.productBox {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  background-color: aliceblue;
}

.aside {
  width: 20vw;
  height: 100vh;
  padding: 30px;
  background-color: coral;
}

.main {
  width: 80vw;
  height: 100vh;
  overflow: auto !important;
}

.main::-webkit-scrollbar {
  display: none;
}

.conForm .el-form {
  display: flex;
}

.conForm .el-form-item {
  margin: 5px 5px;
}

.list {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

.item {
  margin: 10px;
  display: flex;
  flex-direction: column;
  width: calc(100% / 4 - 20px);
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.image {
  width: 100%;
}

.bottom {
  margin-top: 10px;
  line-height: 15px;
  display: -webkit-box;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  color: rgb(74, 72, 72);
}

.goodsItem:hover,
.goodsItem:focus,
.goodsItem:active {
  cursor: pointer;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.loginOut:hover {
  color: white;
}

.pagination {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  z-index: 999;
}
</style>